<template>
  <div class="app-container">
    <el-card>
      <!-- Redis 信息实时监控 -->
      <el-row :gutter="8">
        <el-col :sm="24" :xl="12">
          <!-- <AreaChartTy v-bind="memory"/> -->
          <RedisLineChart :chart-data="memoryData" />
        </el-col>
        <el-col :sm="24" :xl="12">
          <!-- <AreaChartTy v-bind="key"/> -->
          <RedisLineChart :chart-data="keyData" />
        </el-col>
      </el-row>

      <h3>Redis 详细信息</h3>
      <el-table v-loading="tableLoading" :data="dataList" stripe border >
        <el-table-column label="Key" align="left" prop="key" sortable />
        <el-table-column label="描述" align="center" prop="description"   />
        <el-table-column label="Value" align="center" prop="value" :show-overflow-tooltip="true"  />
      </el-table>

    </el-card>
  </div>
</template>
<script>
  import {httpGet} from '@/api';
  import RedisLineChart from './RedisLineChart'

  export default {
    name: 'redisInfo',
    components: {
      RedisLineChart
    },
    data() {
      return {
        loading: true,
        tableLoading: true,
        // 定时器ID
        timer: null,
        // 定时器周期
        millisec: 3000,
        // Key 实时数量
        keyData:{
          title:'Redis Key 实时数量（个）',
          name: 'Key数量',
          timeData: [],
          seriesData: []
        },
        // 内存实时占用情况
        memoryData:{
          title: 'Redis 内存实时占用情况（KB）',
          name: '占用内存',
          timeData: [],
          seriesData: []
        },
        dataList: [],
        url: {
          keysSize: '/monitor/redis/keysSize',
          memoryInfo: '/monitor/redis/memoryInfo',
          info: '/monitor/redis/info'
        },
        path: '/monitor/capability/redis'
      }
    },
    mounted() {
      this.openTimer()
      this.loadRedisInfo()
      setTimeout(() => {
        this.loadData()
      }, 1000)
    },
    beforeDestroy() {
      this.closeTimer()
    },
    methods: {

      loadRedisInfo() {
        this.tableLoading = true
        httpGet(this.url.info).then((res) => {
          this.dataList = res.data
        }).finally(() => {
          this.tableLoading = false
        })
      },

      /** 开启定时器 */
      openTimer() {
        this.loadData()
        this.closeTimer()
        this.timer = setInterval(() => {
          if (this.$route.path === this.path) {
            this.loadData()
          }
        }, this.millisec)
      },

      /** 关闭定时器 */
      closeTimer() {
        if (this.timer) clearInterval(this.timer)
      },

      /** 查询数据 */
      loadData() {
        Promise.all([
          httpGet(this.url.keysSize),
          httpGet(this.url.memoryInfo)
        ]).then((resArr) => {
          let time = this.$formatDate(new Date(), 'hh:mm:ss')

          // let [{ dbSize: currentSize }, memoryInfo] = resArr[1];
          let currentSize = resArr[0].data.dbSize;
          let memoryInfo = resArr[1].data;
          let currentMemory = memoryInfo.used_memory / 1000

          // push 数据
          this.keyData.timeData.push(time);
          this.keyData.seriesData.push(currentSize);
          this.memoryData.timeData.push(time);
          this.memoryData.seriesData.push(currentMemory);
          // this.key.dataSource.push({ x: time, y: currentSize })
          // this.memory.dataSource.push({ x: time, y: currentMemory })
          // 最大长度为10
          if (this.keyData.timeData.length > 10) {
            this.keyData.timeData.splice(0, 1)
            this.keyData.seriesData.splice(0, 1)
            this.memoryData.timeData.splice(0, 1)
            this.memoryData.seriesData.splice(0, 1)
          }

          // // 计算 Key 最大最小值
          // let keyPole = this.getMaxAndMin(this.key.dataSource, 'y')
          // this.key.max = Math.floor(keyPole[0]) + 10
          // this.key.min = Math.floor(keyPole[1]) - 10
          // if (this.key.min < 0) this.key.min = 0

          // // 计算 Memory 最大最小值
          // let memoryPole = this.getMaxAndMin(this.memory.dataSource, 'y')
          // this.memory.max = Math.floor(memoryPole[0]) + 100
          // this.memory.min = Math.floor(memoryPole[1]) - 100
          // if (this.memory.min < 0) this.memory.min = 0

        }).catch((e) => {
          console.error(e)
          this.closeTimer()
          this.$message.error('获取 Redis 信息失败')
        }).finally(() => {
          this.loading = false
        })

      },

      // // 获取一组数据中最大和最小的值
      // getMaxAndMin(dataSource, field) {
      //   let maxValue = null, minValue = null
      //   dataSource.forEach(item => {
      //     let value = Number.parseInt(item[field])
      //     // max
      //     if (maxValue == null) {
      //       maxValue = value
      //     } else if (value > maxValue) {
      //       maxValue = value
      //     }
      //     // min
      //     if (minValue == null) {
      //       minValue = value
      //     } else if (value < minValue) {
      //       minValue = value
      //     }
      //   })
      //   return [maxValue, minValue]
      // },
    }
  }
</script>
<style></style>
